<template>
  <el-row type="flex" justify="center">
    <el-col :span="6" :offset="18">
      <nav>
        <router-link to="/">用户登录</router-link>|
        <router-link to="/alogin">管理员登录</router-link>
      </nav>
      <el-form>
        <el-form-item>
          <p style="font-size:38px">欢迎回来</p>
        </el-form-item>
        <el-form-item>
          <el-input v-model="loginform.account" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="loginform.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="login" type="primary" style="width: 30%;">登录</el-button>
          <el-button @click="register" type="primary" style="width: 30%;">注册</el-button>
          <p>
            <span>忘记密码？</span>
            <router-link style="color: #409EFF;text-decoration:none" to="/login">前往重置</router-link>
          </p>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      loginform: {
        account: "tom",
        password: "123"
      }
    };
  },
  methods: {
    register(){

    },
    login() {
      this.$router.push({path:'uIndex'})
      return;
      if (
        this.loginform.account == null ||
        this.loginform.account == "" ||
        this.loginform.password == null ||
        this.loginform.password == ""
      ) {
        this.$message.warning("用户名和密码不能为空！");
        return;
      }
      this.$axios.post("api/user/login", this.loginform).then(response => {
        let resp = response.data;
        if (resp.code == 200) {
          //保存jwt，localStorage：浏览器提供的保存数据的一个容器，采用key-value 存储
          localStorage.setItem("c-token", resp.msg);
          localStorage.setItem("user", resp.data);
          // console.log('这是后端传来的user：')
          // console.log(resp.data);
          this.$message.success("登录成功！");
          // this.$router.push({path:'bookIndex'})
        } else {
          this.$message.error(resp.msg);
        }
      });
    }
  }
};
</script>

<style scoped>
.el-row {
  /* background: darkslategray; */
  background-image: url("../../assets/login.webp");
  height: 100%;
}
.el-col {
  background: white;
  padding: 15% 20px;
  border-radius: 2px; /*加圆角 */
}
.el-input {
  margin: 8px 1px;
}
</style>
